<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>添加表</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../../../component/elementUI/index.css">
    <link rel="stylesheet" href="../../../style/wangeditor.css">
    <link rel="stylesheet" href="../../../style/index.css">
</head>

<body>
    <div id="app" v-cloak class="minWidth">
        <yl-page-header content="新增表"></yl-page-header>
        <el-form :model="form" :rules="rules" ref="contract" inline-message="true" style="width: 100%">
            <div class="table_titel">
                <div class="titel">新增表</div>
            </div>
            <el-descriptions :column="3" border size="small">
                <el-descriptions-item label="表名称">
                    <el-form-item prop="Table_Name">
                        <el-input v-model.trim="form.Table_Name" placeholder="请输入表昵称"></el-input>
                    </el-form-item>
                </el-descriptions-item>
                <el-descriptions-item label="是否为子表">
                    <el-form-item prop="isChildrenTable">
                        <el-switch v-model="form.isChildrenTable"></el-switch>
                    </el-form-item>
                </el-descriptions-item>
            </el-descriptions>
            <div class="table_titel">
                <div class="titel">字段管理</div>
                <div class="operation">
                    <el-button @click="base_table_detail_add" type="primary" size="small">新增</el-button>
                    <el-button @click="base_table_detail_remove" type="danger" size="small">删除</el-button>
                </div>
            </div>
            <el-descriptions style="margin-bottom: 5px;" :column="4"
                v-for="(item,index) in form.Children.base_table_detail" :key="index" border size="small">
                <el-descriptions-item label="字段名称">
                    <el-form-item :rules="rules.Table_Detail_Name"
                        :prop="'Children.base_table_detail.' + index + '.Table_Detail_Name'">
                        <el-input v-model.trim="item.Table_Detail_Name" placeholder="请输入字段名称"></el-input>
                    </el-form-item>
                </el-descriptions-item>
                <el-descriptions-item label="字段类型">
                    <el-form-item prop="Table_Detail_Type">
                        <el-select @change="ChangeType($event,item)" placeholder="请选择字段类型" style="width: 100%;"
                            v-model.trim="item.Table_Detail_Type">
                            <el-option v-for="item in Type" :key="item" :label="item" :value="item"></el-option>
                        </el-select>
                    </el-form-item>
                </el-descriptions-item>
                <el-descriptions-item label="字段长度">
                    <el-form-item prop="Table_Detail_Length">
                        <el-input-number :disabled="item.Table_Detail_Type=='text'" v-model="item.Table_Detail_Length"
                            :min="item.Table_Detail_Type=='varchar'?1:0"></el-input-number>
                    </el-form-item>
                </el-descriptions-item>
                <el-descriptions-item label="设置为主键">
                    <el-form-item prop="isPrimaryKey">
                        <el-switch :disabled="item.Table_Detail_Type=='text'||(form.Children.base_table_detail.some(i=>i.isPrimaryKey)&&!item.isPrimaryKey)" 
                            v-model="item.isPrimaryKey"></el-switch>
                    </el-form-item>
                </el-descriptions-item>
                <el-descriptions-item label="允许为空">
                    <el-form-item prop="isNull">
                        <el-switch v-model="item.isNull"></el-switch>
                    </el-form-item>
                </el-descriptions-item>
                <el-descriptions-item label="字段注释">
                    <el-form-item prop="Table_Detail_Label">
                        <el-input v-model.trim="item.Table_Detail_Label" placeholder="请输入字段注释"></el-input>
                    </el-form-item>
                </el-descriptions-item>
                <el-descriptions-item label="默认值">
                    <el-form-item prop="Table_Detail_Default">
                        <el-input :disabled="item.Table_Detail_Type=='text'" v-model.trim="item.Table_Detail_Default"
                            placeholder="请输入默认值"></el-input>
                    </el-form-item>
                </el-descriptions-item>
                <el-descriptions-item label="索引">
                    <el-form-item prop="Table_Detail_Index">
                        <el-input :disabled="item.Table_Detail_Type=='text'" v-model.trim="item.Table_Detail_Index"
                            placeholder="可输入索引"></el-input>
                    </el-form-item>
                </el-descriptions-item>
            </el-descriptions>
            <template v-if="form.isChildrenTable">
                <div class="table_titel">
                    <div class="titel">配置主表</div>
                </div>
                <el-descriptions :column="4" border size="small">
                    <el-descriptions-item label="名(索引)">
                        <el-form-item prop="index">
                            <el-input v-model.trim="form.index" placeholder="请输入名(索引)"></el-input>
                        </el-form-item>
                    </el-descriptions-item>
                    <el-descriptions-item label="栏位(字段)">
                        <el-form-item prop="Foreign_Key">
                            <el-select placeholder="请选择栏位(字段)" style="width: 100%;" clearable  filterable
                                v-model.trim="form.Foreign_Key">
                                <el-option
                                    v-for="(item,index) in form.Children.base_table_detail.filter(i=>i.Table_Detail_Name&&i.Table_Detail_Type!='text')"
                                    :key="index" :label="item.Table_Detail_Name"
                                    :value="item.Table_Detail_Name"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-descriptions-item>
                    <el-descriptions-item label="被参考表">
                        <el-form-item prop="Parent_Table_Name">
                            <el-select @change="ChangeTable" placeholder="请选择被参考表" style="width: 100%;" clearable filterable
                                v-model.trim="form.Parent_Table_Name">
                                <el-option v-for="(item,index) in Table" :key="index" :label="item.TABLE_NAME"
                                    :value="item.TABLE_NAME"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-descriptions-item>
                    <el-descriptions-item label="参考栏位">
                        <el-form-item prop="Parent_Primary_Key">
                            <el-select :disabled="Column.length == 0" placeholder="请选择参考栏位" style="width: 100%;" filterable
                                clearable v-model.trim="form.Parent_Primary_Key">
                                <el-option v-for="(item,index) in Column" :key="index" :label="item.COLUMN_NAME"
                                    :value="item.COLUMN_NAME"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-descriptions-item>
                </el-descriptions>
            </template>
            <div style="height: 90px;"></div>
            <el-form-item class="form-operation">
                <el-button @click="window.history.back()">返回</el-button>
                <el-button type="primary" :loading="loading" @click="submitForm('contract')">提交</el-button>
            </el-form-item>
        </el-form>
    </div>
    <script type="text/javascript" src="../../../utils/wangeditor.js"></script>
    <script type="text/javascript" src="../../../utils/jquery.min.js"></script>
    <script type="text/javascript" src="../../../utils/jquery.cookie.js"></script>
    <script type="text/javascript" src="../../../utils/vue.min.js"></script>
    <script type="text/javascript" src="../../../utils/vuex.min.js"></script>
    <script type="text/javascript" src="../../../component/elementUI/index.js"></script>
    <script type="text/javascript" src="../../../component/component.js"></script>
    <script type="text/javascript" src="../../../config/config.js"></script>
    <script type="text/javascript" src="../../../utils/compressor.js"></script>
    <script type="text/javascript" src="../../../utils/ID_Validity.js"></script>
    <script type="text/javascript" src="../../../utils/utils.js"></script>
    <script type="text/javascript" src="js/add.js"></script>
</body>

</html>